<template>
  <div>
    <div class="title">
      <i class="iconfont icon-return" @click="back"></i>
      <span>请选择接收校验码的手机号码</span>
    </div>
    <div class="form">
      <div class="block">
        <div class="group hairlines-bottom">
          <label for="name">手机号</label>
          <input id="name" type="number" placeholder="请输入手机号" ref="phone">
        </div>
        <div class="group">
          <label for="code">校验码</label>
          <div class="with-bt">
            <input class="code-input" id="code" type="number" placeholder="请输入校验码" ref="code">
            <input class="codebt" type="button" :value="codetext" @click="sendCode" ref="sendBt">
          </div>
        </div>
      </div>
    </div>
    <p class="tips">此手机为您的支付宝绑定手机号码</p>
    <footer>
      <input class="bt" type="button" value="提交" @click="submit">
      <p>芝麻信用 · 版权所有</p>
    </footer>
    <loading-tem v-show="loadingIsShow" :show="loadingIsShow"></loading-tem>
  </div>
</template>
<script>
  import $ from 'edom'
  import loading from '../../loading/loading.vue'

  export default {
    name: 'zmPhone',
    components: {
      'loading-tem': loading
    },
    data () {
      return {
        title: '验证芝麻分',
        time: 60,
        codetext: '获取校验码',
        loadingIsShow: false
      }
    },
    methods: {
      back () {
        this.$router.go(-1)
      },
      sendCode () {
        let Timer = null
        let sendBt = this.$refs.sendBt
        let phone = this.$refs.phone
        if (!$().checkPhone(phone.value)) {
          $().Mnews('请检查手机号', 1000)
          return
        }
        sendBt.setAttribute('disabled', 'disabled')
        this.codetext = `剩余(${this.time}s)`
        Timer = setInterval(() => {
          if (this.time <= 1) {
            clearInterval(Timer)
            sendBt.removeAttribute('disabled')
            this.time = 60
            this.codetext = '获取校验码'
          } else {
            this.time--
            this.codetext = `剩余(${this.time}s)`
          }
        }, 1000)
        this.axios.post('/api/sms/send_code', {
          mobile: phone.value
        }).then((res) => {
          let data = res.data
          if (data.code !== 200) {
            $().Mnews(data.desc)
          }
        })
      },
      submit () {
        // this.loadingIsShow = true
        // let code = this.$refs.code
        // let phone = this.$refs.phone
        // this.axios.post('/api/user/check_zhima', {
        //   user_id: this.$store.state.user_id,
        //   token: this.$store.state.token,
        //   mobile: phone.value,
        //   code: code.value
        // }).then((res) => {
        //   let data = res.data
        //   if (data.code === 200) {
        //     this.$store.commit('zmQuotaChecked')
        //     this.$store.commit('profileStepSet', 8)
        //     this.$router.push({name: 'Assessment', params: {state: 0}})
        //   } else {
        //     $().Mnews(data.desc)
        //   }
        //   this.loadingIsShow = false
        // })
        this.loadingIsShow = true
        let code = this.$refs.code
        let phone = this.$refs.phone
        this.axios.post('/api/zmop/index', {
          user_id: this.$store.state.user_id,
          token: this.$store.state.token,
          mobile: phone.value,
          code: code.value
        }).then((res) => {
          let data = res.data
          if (data.code === 200) {
            this.$store.commit('zmQuotaChecked')
            this.$store.commit('profileStepSet', 8)
            // this.$router.push({name: 'Assessment', params: {state: 0}})
            location.href = data.desc
          } else {
            $().Mnews(data.desc)
          }
          this.loadingIsShow = false
        })
      }
    },
    created () {
      this.setTitle(this.title)
    }
  }
</script>
<style lang="scss" scoped>
  @import '../../../styles/form.scss';
  .title{
    padding: 0 rem(24);
    height: rem(92);
    line-height: rem(92);
    font-size: rem(28);
    color: #999;
    display: flex;
    align-items: center;
    .icon-return{
      margin-right: rem(10);
      font-size: rem(32);
      color: #666;
    }
  }
  .form{
    .block{
      .group{
        label{
          display: block;
          width: rem(200);
        }
        input{
          text-align: left;
          padding-right: 0;
        }
        .with-bt .code-input{
          padding-right: 0;
        }
      }
    }
  }
  .tips{
    padding: rem(5) rem(24) rem(60);
    font-size: rem(28);
    color: #999;
  }
  footer{
    padding: 0 rem(24);
    .bt{
      width: 100%;
      height: rem(90);
      font-size: rem(34);
      color: #fff;
      border-radius: 2px;
      background: #72a5ef;
    }
    p{
      padding-top: rem(35);
      font-size: rem(28);
      color: #ccc;
      text-align: center;
    }
  }
</style>
